import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { Button, Row, Col, Table } from 'antd'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
import moment from 'moment'
import { getOrders } from '@/api/order'
import { typeOrderProductItem } from '@/types/cart'
import { typeOrder } from '@/types/user'
import './index.scss'
import { showLoading, hideLoading } from '../../../register/globalFun'

const pageSize = 10
const Product = () => {
  const history = useHistory()
  const [orders, setOrders] = useState([])
  const [current, setCurrent] = useState(1)
  const [total, setTotal] = useState(0)

  useEffect(() => {
    loadOrders(1)
  }, [])

  const loadOrders = async(pageNum = current) => {
    if (total >= orders.length) {
      try {
        showLoading()
        const res = await getOrders({
          pageNum,
          pageSize
        })

        console.log(res)
        setOrders(res.data.orders)
        setTotal(res.data.total)
        setCurrent(pageNum)
      } catch (err) {
        console.log(err)
      }
      hideLoading()
    }
  }

  const columns = [
    {
      title: '创建时间',
      key: 'createdAt',
      render: (text: string, record:typeOrder) => (
        <span>{moment(record.createdAt).format('YYYY/MM/DD HH:mm:ss')}</span>
      )
    },
    {
      title: '用户名',
      key: 'user',
      render: (text: string, record: typeOrder) => (
        <span>{record.user.name}</span>
      )
    },
    {
      title: '商品内容',
      dataIndex: 'product',
      render: (text: string, record: typeOrder) => (
        <div>
          {record.productsItems.map((item:typeOrderProductItem) => (
            <div key={item._id}><strong>{item.name}</strong> * {item.qty}</div>
          ))}
        </div>
      )
    },
    {
      title: '价格',
      key: 'price',
      render: (text: string, record: typeOrder) => (
        <div>
          {record.productsPrice} + {record.shippingPrice} = {record.totalPrice}
        </div>
      )
    },
    {
      title: '支付状态',
      dataIndex: 'isPaid',
      render: (text: string, record:typeOrder) => (
        <div>
          {
            record.isPaid
              ? <CheckOutlined style={{ color: '#7cb305' }} />
              : <CloseOutlined style={{ color: '#f5222d' }} />
          }
        </div>
      )
    },
    {
      title: '发货状态',
      dataIndex: 'isDelivered',
      render: (text: string, record:typeOrder) => (
        <div>
          {
            record.isDelivered
              ? <CheckOutlined style={{ color: '#7cb305' }} />
              : <CloseOutlined style={{ color: '#f5222d' }} />
          }
        </div>
      )
    },
    {
      title: '收货状态',
      dataIndex: 'isReceived',
      render: (text: string, record:typeOrder) => (
        <div>
          {
            record.isReceived
              ? <CheckOutlined style={{ color: '#7cb305' }} />
              : <CloseOutlined style={{ color: '#f5222d' }} />
          }
        </div>
      )
    },
    {
      key: 'control',
      render: (text:string, record:typeOrder) => (
        <Button
          onClick={() => { history.push(`/order/${ record._id }/admin`) }}
        >
          查看详情
        </Button>
      )
    },
  ]

  return (
    <div className="orders-manage">
      <h2>用户订单</h2>
      <Table
        columns={columns}
        dataSource={orders}
        pagination={{
          position: ['bottomRight'],
          pageSize,
          current,
          total,
          onChange: (current:number) => {
            loadOrders(current)
          }
        }}
        rowKey={(record:typeOrder) => record._id || ''}
      />
    </div>
  )
}

export default Product
